<template>
    <fieldset>
        <legend>个人中心</legend>
        <h1>我的世界</h1>
        <router-link to="/mine/stone">头像</router-link>
        |
        <router-link to="/mine/charge">充值</router-link>
        |
        <router-link to="/mine/emplace">修改</router-link>
        <router-view></router-view>
        <h2>
            vuex中的name :
            <i style="color:red">{{name}}</i>
        </h2>
        <h2>
            getters反转后的值：
            <b style="color:green">{{ reverseN}}</b>
        </h2>

        <fieldset>
            <legend>
                计数器,c充值中心
            </legend>
            <button @click="DECREASE(222)">-</button>
            &nbsp;
            <b>{{num}}</b>
            &nbsp;
            <button @click="INCREASE(777)">+</button>
        </fieldset>
    </fieldset>

</template>
<script>
// 辅助函数mapstate获取state(映射到computed中)
// 辅助函数mapGetters获取getters(映射到computed中)
//辅助函数mapMutations获取mutations(映射到methods)
import {mapState ,mapGetters,mapMutations} from 'vuex'

export default{
    mounted(){
        console.log(this.$store)
        console.log(this.$store.state.name)
        console.log(this.nickname),
        console.log(this.reverseN)
        
    },
    // state 和 getters都会映射在组件的computed里面
    computed:{
        ...mapState(['name','age','nickname','num']),
        ...mapGetters(['reverseN'])
    },
    methods:{
        // handleIncrease(){
        //     //通过commit来触发mutation函数,这里的第二个参数会传递给store里，INCREASE的payload 
        //     this.$store.commit('INCREASE','小白兔')
        // },
        ...mapMutations(['INCREASE','DECREASE'])
    }
}
</script>